<template>
  <div class="attr-item">
    <div class="attr-item-label">
      <template v-if="isHasExpand">
        <div class="expand-icon" v-if="curResult" @click="onChangeExpand">
          <Icon icon="ant-design:caret-right-outlined" v-if="!isExpand" />
          <Icon icon="ant-design:caret-down-outlined" v-if="isExpand" />
        </div>
      </template>

      <span>{{ title }}</span>
    </div>
    <div class="attr-item-value">
      <a-select v-model:value="curResult" :options="curVarRuleOptions" />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, ref, watch } from 'vue'
import { TableColumnConfigSelectOptionsModel } from '../../tableColumnConfig/model'
import { BwTableLinkPageTypeEnum } from '../../tableColumnConfig/enum'
import {
  BwPageResultOutputSysApplicationAppGetCustomPageListOutput,
  BwPageResultOutputSysApplicationAppGetFlowFormListOutput,
  BwPageResultOutputSysApplicationAppGetNormalFormListOutput,
  SysNavAppGetListOutput,
  SysNavTypeEnum,
} from '@bitwit/tenantapi'
import { AppSysNavCustomPageTypeEnum } from '/@/enums/customPageTypeEnum'
import { api, useAxiosResponse } from '/@/api'

export default defineComponent({
  name: 'BwNodeAttrsConstTableColumnConfigSelect',
  props: {
    title: {
      type: String,
    },
    value: {
      type: [String, Number],
    },
    /** 是否有展开功能 */
    isHasExpand: {
      type: Boolean,
    },
    isExpand: {
      type: Boolean,
    },
    linkApp: {
      type: [String],
    },
    pageType: {
      type: [String] as PropType<BwTableLinkPageTypeEnum>,
    },
  },
  emits: ['update:value', 'change', 'update:isExpand'],
  setup(props, { emit }) {
    /** 对象值 */
    const curResult = computed({
      get: (): string | number | undefined => {
        return props.value
      },
      set: (value) => {
        emit('update:value', value)
        emit('change', value)
      },
    })

    const onChangeExpand = () => {
      emit('update:isExpand', !props.isExpand)
    }

    /** 当前选项列表 */
    const curVarRuleOptions = ref<TableColumnConfigSelectOptionsModel[]>([])

    let curPageType: BwTableLinkPageTypeEnum | undefined = props.pageType

    /** 根据类型返回对应option */
    const getOptionByType = (
      item: SysNavAppGetListOutput,
      appId: string | number
    ): TableColumnConfigSelectOptionsModel => {
      let _label: string | undefined
      /** 用作页面id */
      let _value: string | number | undefined
      let _type = ''
      let _disabled: boolean = false
      let _children: TableColumnConfigSelectOptionsModel[] | undefined
      switch (item.type) {
        case SysNavTypeEnum.NUMBER_2: {
          _value = item.normalFormId?.toString() ?? undefined
          _label = item.title || '未命名普通表单'
          _type = BwTableLinkPageTypeEnum.normalForm
          break
        }
        case SysNavTypeEnum.NUMBER_3: {
          _label = item.title || '未命名分组'
          _children =
            item.children
              ?.map((item) => getOptionByType(item, appId))
              ?.filter((item) => !item.disabled || !!item.children?.length) ??
            undefined
          break
        }
        case SysNavTypeEnum.NUMBER_5: {
          _value = item.flowFormId?.toString() ?? undefined
          _label = item.title || '未命名流程表单'
          _type = BwTableLinkPageTypeEnum.flowForm
          break
        }
        case SysNavTypeEnum.NUMBER_6: {
          switch (item?.customPageType) {
            case AppSysNavCustomPageTypeEnum.report:
              _value = item.customPageId?.toString() ?? undefined
              _label = item.title || '未命名报表'
              _type = BwTableLinkPageTypeEnum.report
              break
            default:
              _value = item.customPageId?.toString() ?? undefined
              _label = item.title || '未命名自定义页面'
              _type = BwTableLinkPageTypeEnum.customPage
              break
          }
          break
        }
        default:
          _value = undefined
          _label = item.title || '未命名'
          break
      }

      _disabled = !_value || !!item.pcIsHidden || _type != curPageType

      return {
        label: _label,
        // 可能会修改
        value: _value ?? item.id ?? '',
        disabled: _disabled,
        children: _children,
      }
    }

    watch(
      [() => props.linkApp, () => props.pageType],
      ([linkApp, pageType]) => {
        const linkAppId: string | undefined = linkApp?.toString()
        const curPageType: BwTableLinkPageTypeEnum | undefined = pageType
        if (linkAppId) {
          switch (curPageType) {
            case BwTableLinkPageTypeEnum.customPage:
              api
                .apiSysApplicationGetCustomPageListPost({
                  appId: linkAppId,
                  types: [AppSysNavCustomPageTypeEnum.customPage],
                })
                .then((res) => {
                  const resData =
                    useAxiosResponse<
                      Nullable<BwPageResultOutputSysApplicationAppGetCustomPageListOutput>
                    >(res)
                  curVarRuleOptions.value =
                    resData?.rows?.map((item) => ({
                      label: item.name ?? '未命名自定义页面',
                      value: item.id ?? '',
                    })) ?? []
                  console.log({ resData })
                })
              break
            case BwTableLinkPageTypeEnum.flowForm:
              api
                .apiSysApplicationGetFlowFormListPost({
                  appId: linkAppId,
                })
                .then((res) => {
                  const resData =
                    useAxiosResponse<
                      Nullable<BwPageResultOutputSysApplicationAppGetFlowFormListOutput>
                    >(res)
                  curVarRuleOptions.value =
                    resData?.rows?.map((item) => ({
                      label: item.name ?? '未命名流程表单',
                      value: item.id ?? '',
                    })) ?? []
                })
              break
            case BwTableLinkPageTypeEnum.normalForm:
              api
                .apiSysApplicationGetNormalFormListPost({
                  appId: linkAppId,
                })
                .then((res) => {
                  const resData =
                    useAxiosResponse<
                      Nullable<BwPageResultOutputSysApplicationAppGetNormalFormListOutput>
                    >(res)
                  curVarRuleOptions.value =
                    resData?.rows?.map((item) => ({
                      label: item.name ?? '未命名普通表单',
                      value: item.id ?? '',
                    })) ?? []
                })
              break
            case BwTableLinkPageTypeEnum.portal:
              api
                .apiSysApplicationGetCustomPageListPost({
                  appId: linkAppId,
                  types: [AppSysNavCustomPageTypeEnum.portal],
                })
                .then((res) => {
                  const resData =
                    useAxiosResponse<
                      Nullable<BwPageResultOutputSysApplicationAppGetCustomPageListOutput>
                    >(res)
                  curVarRuleOptions.value =
                    resData?.rows?.map((item) => ({
                      label: item.name ?? '未命名门户',
                      value: item.id ?? '',
                    })) ?? []
                })
              break
            case BwTableLinkPageTypeEnum.report:
              api
                .apiSysApplicationGetCustomPageListPost({
                  appId: linkAppId,
                  types: [AppSysNavCustomPageTypeEnum.report],
                })
                .then((res) => {
                  const resData =
                    useAxiosResponse<
                      Nullable<BwPageResultOutputSysApplicationAppGetCustomPageListOutput>
                    >(res)
                  curVarRuleOptions.value =
                    resData?.rows?.map((item) => ({
                      label: item.name ?? '未命名报表',
                      value: item.id ?? '',
                    })) ?? []
                })
              break
            case BwTableLinkPageTypeEnum.other:
              curVarRuleOptions.value = []
              break

            default:
              curVarRuleOptions.value = []
              break
          }
        }
      },
      {
        immediate: true,
        deep: true,
      }
    )

    return { curResult, onChangeExpand, curVarRuleOptions }
  },
})
</script>

<style lang="less" scoped>
.attr-item {
  display: flex;
  align-items: center;
  padding: 8px;

  .attr-item-label {
    width: 90px;
    text-align: left;
  }

  .attr-item-value {
    flex: 1;
    .ant-select {
      width: 100%;
    }
  }

  .required:after {
    color: red;
    content: '*';
  }
}
</style>
